<template>
  <div :content="$t('msg.navBar.guide')"  @click="onClick">
    <svg-icon id="guide-start" icon="guide">
    </svg-icon>
  </div>
</template>
<script setup lang="ts">
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import steps from './step'
const i18n = useI18n()

let driver : Driver | null = null
onMounted(() => {
  driver = new Driver({
    // 禁止蒙版关闭
    allowClose: false,
    closeBtnText: i18n.t('msg.guide.close'),
    nextBtnText: i18n.t('msg.guide.next'),
    prevBtnText: i18n.t('msg.guide.prev')
  })
})
const onClick = () => {
  driver.defineSteps(steps(i18n))
  driver.start()
}
</script>
<style scoped lang="scss">

</style>
